<template>
  <div class="main-content bill-wrapper">
    <div class="filter-box">
      <p class="title">激励账单查询</p>

      <el-form
        :inline="true"
        :model="form">
        <div class="item">
          <el-form-item label="客户账号">
            <el-input
              v-model="form.accountName"
              placeholder="请输入"
              clearable
              @clear="searchFn"
               />
          </el-form-item>
          <el-form-item label="账单时间">
            <el-date-picker
              v-model="form.date"
              type="daterange"
              range-separator="至"
              value-format="YYYY-MM-DD"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="changeDate" />
          </el-form-item>
        </div>
        <div class="item">
          <el-form-item label="订单状态">
            <el-select
              v-model="form.status"
              placeholder="请选择"
              clearable
              @change="searchFn">
              <el-option
                label="已取消"
                :value="-1" />
              <el-option
                label="待支付"
                :value="0" />
              <el-option
                label="已支付"
                :value="1" />
              <el-option
                label="已退款"
                :value="2" />
            </el-select>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <div class="content-box">
      <div class="top-box">
        <p class="amount-box">本月激励总金额：{{ totalAmout }}</p>
      </div>

      <ct-table :options="tableOptions">
        <template v-slot:index="scope">
          <span>{{ scope.row.index }}</span>
        </template>
        <template v-slot:orderType="scope">
          <span>{{ scope.row.orderType === 1 ? '续费' : '新购' }}</span>
        </template>
        <template v-slot:status="scope">
          <span>{{ handleStatus(scope.row.status) }}</span>
        </template>
        <template v-slot:operate="scope">
          <el-text
            type="primary"
            @click="toDetail(scope.row)">
            详情
          </el-text>
        </template>
      </ct-table>

      <ct-pagination
        :options="pageOptions"
        :pageEvent="getListData">
      </ct-pagination>
    </div>
  </div>
</template>

<script setup>
  import { getIncentiveList } from '@/api/index';

  import { useRouter } from 'vue-router';
  const router = useRouter();

  const { proxy } = getCurrentInstance();

  import CtTable from '@/components/CtTable.vue';
  import CtPagination from '@/components/Pagination.vue';

  import { usePageOptions } from '@/hooks/usePageOptions';
  const { pageOptions } = usePageOptions();

  let form = ref({
    accountName: '',
    date: '',
    start: '',
    end: '',
    status: ''
  });

  let totalAmout = ref(0);

  function toDetail(row) {
    console.log(row);
    router.push({
      name: 'billDetail',
      query: {
        id: row.id
      }
    });
  }

  let tableOptions = reactive({
    data: [],
    loading: false,
    columns: [
      {
        label: '序号',
        prop: 'index',
        width: 80,
        isCustom: true
      },
      {
        label: '产品名称',
        prop: 'productName'
      },
      {
        label: '订单号',
        prop: 'orderSn'
      },
      {
        label: '客户账号',
        prop: 'accountName'
      },
      {
        label: '订单类型',
        prop: 'orderType',
        isCustom: true
      },
      {
        label: '订单原价',
        prop: 'orderPrice'
      },
      {
        label: '实付金额',
        prop: 'payPrice'
      },
      {
        label: '算力券抵扣',
        prop: 'voucherPrice'
      },
      {
        label: '订单状态',
        prop: 'status',
        isCustom: true
      },
      {
        label: '下单时间',
        prop: 'createTime'
      },
      {
        label: '激励金额',
        prop: 'incentiveMoney'
      },
      {
        label: '操作',
        prop: 'operate',
        isCustom: true
      }
    ]
  });

  function getListData() {
    tableOptions.loading = true;
    const { currentPage, pageSize } = pageOptions;
    const { accountName, isSend, status, start, end } = form.value;

    getIncentiveList({
      accountName,
      isSend,
      status,
      start,
      end,
      offset: currentPage ,
      limit: pageSize
    })
      .then(res => {
        totalAmout.value = res.data.incentiveTotal;
        const { rows, total } = res.data.incentiveLogList;
        if (rows.length) {
          for (let i = 0; i < rows.length; i++) {
            rows[i].index = proxy.$handleIndex(i, pageOptions);
            rows[i].orderPrice =parseFloat(rows[i].orderPrice.toFixed(2)) 
            rows[i].payPrice =parseFloat(rows[i].payPrice.toFixed(2)) 
            rows[i].voucherPrice =parseFloat(rows[i].voucherPrice.toFixed(2)) 
            rows[i].incentiveMoney =parseFloat(rows[i].incentiveMoney.toFixed(2)) 
          }
        }
        tableOptions.data = rows;
        tableOptions.loading = false;
        pageOptions.total = total;
      })
      .catch(() => {
        tableOptions.loading = false;
      });
  }

  const searchFn = proxy.$debounce(() => {
    tableOptions.data = [];
    pageOptions.currentPage = 1;
    pageOptions.total = 0;

    getListData();
  });

  function handleStatus(status) {
    const statusMap = {
      '-1': '已取消',
      0: '待支付',
      1: '已支付',
      2: '已退款'
    };

    return statusMap[status] || '';
  }

  function changeDate(value) {
    if (value) {
      form.value.start = value[0] + ' 00:00:00';
      form.value.end = value[1] + ' 23:59:59';
    } else {
      form.value.start = '';
      form.value.end = '';
    }

    searchFn();
  }

  onMounted(() => {
    getListData();
  });
</script>

<style lang="scss" scoped>
  .bill-wrapper {
    .content-box {
      .top-box {
        margin-bottom: 20px;
        .amount-box {
          color: var(--color-primary);
        }
      }
    }
  }
</style>
